<style lang="scss">
  @import "../../../assets/css/_variable";

</style>
<template>
  <div class="height-100">
    <mt-header :title="mission.name">
      <mt-button icon="back" slot="left" @click="$router.go(-1)">返回</mt-button>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <div class="info xy-card margin-small">
      <span>学习阶段</span>
      <el-rate :value="doProblemCount" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
               :max="questionSize" disabled></el-rate>
    </div>
    <div class="problem xy-card margin-small">
      <question v-if="question.content" :question="question" @check="check" @next="next"></question>
    </div>
  </div>
</template>

<script type="text/babel">
  import missions from '../../db/missions';
  import questionModels from '../../db/questionModels';
  import books from '../../db/books';

  import Question from './Question.vue';

  export default {
    components: {
      Question
    },
    data() {
      return {
        missions,
        mission: {examples: []},
        modelId: 0,
        question: {},
        //例题序号
        exampleIndex: 0,
        //单个例题的题目序号
        questionIndex: 0,
        //每个例题需要联系题目数量
        perExampleSize: 3
      }
    },
    computed: {
      model() {
        let model = questionModels[this.modelId];
        this.question = model.next();
        return model;
      },
      questionSize() {
        return this.mission.examples.length * this.perExampleSize;
      },
      doProblemCount() {
        return this.exampleIndex * 3 + this.questionIndex;
      }
    },
    methods: {
      load() {
        this.mission = missions[this.$route.query['mission']];
        if (this.mission) {
          this.modelId = this.mission.examples[0];
          this.question = this.model.next();
        }
      },
      check(result) {
        if (result) {
          this.questionIndex++;
          if (this.questionIndex === this.perExampleSize) {
            this.questionIndex = 0;
            this.exampleIndex++;
            this.modelId = this.mission.examples[this.exampleIndex];
          }
        }
      },
      next() {
        if (this.doProblemCount === this.questionSize) {
          this.finish();
        } else {
          this.question = this.model.next();
        }
      },
      finish() {
        alert('finish');
      }
    },
    mounted() {
      this.load();
    }
  };
</script>
